:host {
  display: inline-flex;
}

:host .quark-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tag-border-radius, quark-radiusSm);
  padding-left: var(--tag-hspacing, quark-hSpacingS);
  padding-right: var(--tag-hspacing, quark-hSpacingS);
  /* padding-top: var(--tag-vspacing, quark-vSpacingXxs); */
  /* padding-bottom: var(--tag-vspacing, quark-vSpacingXxs); */
  font-size: var(--tag-font-size, quark-fontSizeCaptionSsm);
  line-height: var(--tag-line-height, 16px);
  font-weight: var(--tag-font-weight, 400);
  font-family: var(--tag-font-family, quark-sFontFamily);
  color: var(--tag-text-color, #fff);
  background: var(--tag-background, quark-primaryColor);
  width: auto;
  height: auto;
}

:host([round]) .quark-tag {
  border-radius: 999px;
}

:host([size="large"]) .quark-tag {
  padding-left: var(--tag-hspacing, 6px);
  padding-right: var(--tag-hspacing, 6px);
  /* padding-top: var(--tag-vspacing, quark-vSpacingXxs); */
  /* padding-bottom: var(--tag-vspacing, quark-vSpacingXxs); */
  font-size: var(--tag-font-size, 14px);
  line-height: var(--tag-line-height, 24px);
  font-weight: var(--tag-font-weight, 500);
  font-family: var(--tag-font-family, quark-mFontFamily);
}

:host([type="primary"]) .quark-tag {
  background: var(--quark-theme-color, quark-primaryColor);
}

:host([type="warning"]) .quark-tag {
  background: var(--quark-warning-color, quark-warningColor);
}

:host([type="danger"]) .quark-tag {
  background: var(--quark-danger-color, quark-dangerColor);
}

:host([type="success"]) .quark-tag {
  background: var(--quark-success-color, quark-successColor);
}

:host([plain]) .quark-tag {
  background: white;
  /* border: 0.5px solid; */
  /* border-color: var(--tag-border-color, quark-primaryColor); */
  outline: 0.5px solid;
  outline-color: var(--tag-border-color, --tag-text-color);
  color: var(--tag-text-color, quark-primaryColor);
}

:host([plain][type="primary"]) .quark-tag {
  border-color: var(--tag-border-color, #b2dbff);
  color: var(--tag-text-color, quark-primaryColor);
}

:host([plain][type="warning"]) .quark-tag {
  border-color: var(--tag-border-color, #fde0b7);
  color: var(--tag-text-color, quark-warningColor);
}

:host([plain][type="danger"]) .quark-tag {
  border-color: var(--tag-border-color, #fcbdbd);
  color: var(--tag-text-color, quark-dangerColor);
}

:host([plain][type="success"]) .quark-tag {
  border-color: var(--tag-border-color, #b4eccf);
  color: var(--tag-text-color, quark-successColor);
}

:host([light]) .quark-tag {
  color: var(--tag-text-color, quark-primaryColor);
  background: var(--quark-primary-light-color, quark-primaryLightColor);
}

:host([light][type="primary"]) .quark-tag {
  background: var(--quark-primary-light-color, quark-primaryLightColor);
  color: var(--tag-text-color, quark-primaryColor);
}

:host([light][type="warning"]) .quark-tag {
  background: var(--quark-warning-light-color, quark-warningLightColor);
  color: var(--tag-text-color, quark-warningColor);
}

:host([light][type="danger"]) .quark-tag {
  background: var(--quark-danger-light-color, quark-dangerLightColor);
  color: var(--tag-text-color, quark-dangerColor);
}

:host([light][type="success"]) .quark-tag {
  background: var(--quark-success-light-color, quark-successLightColor);
  color: var(--tag-text-color, quark-successColor);
}
